<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
    content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
  <title>电商购物网站-正品低价、品质保障、配送及时、轻松购物！</title>
  <!-- 引入初始化css -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <!-- 引入ico -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入iconfont（symbol） -->
  <script src="./fonts/iconfont.js"></script>
  <script src="./js/swiper.min.js"></script>
</head>

<body>

  <!-- 顶部快捷导航 start -->
  <div class="shortcut">
    <div class="w">
      <!-- 左侧 start -->
      <p class="fl">
        <em>(｡･∀･)ﾉﾞ嗨 欢迎来到这里购物！</em>
        <a class="login" href="#">请登录</a>
        <a class="register" href="#">免费注册</a>
      </p>
      <!-- 左侧 end -->
      <!-- 右侧 start -->
      <ul class="fr">
        <li><a href="#">我的订单</a></li>
        <li class="spacer"></li>
        <li>
          <a href="#">我的狗东</a>
          <svg class="icon arrow-down" aria-hidden="true">
            <use xlink:href="#icon-ai-arrow-down"></use>
          </svg>
        </li>
        <li class="spacer"></li>
        <li><a href="#">狗东会员</a></li>
        <li class="spacer"></li>
        <li>
          <a href="#">企业采购</a>
          <svg class="icon arrow-down" aria-hidden="true">
            <use xlink:href="#icon-ai-arrow-down"></use>
          </svg>
        </li>
        <li class="spacer"></li>
        <li>
          <a href="#">客户服务</a>
          <svg class="icon arrow-down" aria-hidden="true">
            <use xlink:href="#icon-ai-arrow-down"></use>
          </svg>
        </li>
        <li class="spacer"></li>
        <li>
          <a href="#">网站导航</a>
          <svg class="icon arrow-down" aria-hidden="true">
            <use xlink:href="#icon-ai-arrow-down"></use>
          </svg>
        </li>
        <li class="spacer"></li>
        <li>
          <a href="#">手机狗东</a>
        </li>
      </ul>
      <!-- 右侧 end -->


    </div>
  </div>
  <!-- 顶部快捷导航 end -->
  <!-- 头部 start -->
  <div class="header">
    <!-- 规定头部版心 -->
    <div class="w">
      <!-- logo start -->
      <div class="logo">
        <h1 class="logo-tit">
          <a class="logo-tit-lk" href="index.html">狗东</a>
        </h1>
      </div>
      <!-- logo end -->
      <!-- serach start -->
      <div class="search">
        <input class="text fl" type="text" placeholder="搜索 狗东 商品/品牌/店铺">
        <button class="btn fr">搜索</button>
      </div>
      <!-- serach end -->
      <!-- hotwrods start -->
      <div class="hotwords">
        <a class="style-red" href="#">号卡免费领</a>
        <a href="#">狗东电脑</a>
        <a href="#">省电空调</a>
        <a href="#">二手用品</a>
        <a href="#">季末清仓</a>
        <a href="#">nike</a>
        <a href="#">9.9元秒杀</a>
        <a href="#">家装</a>
      </div>
      <!-- hotwrods end -->
      <!-- shopcar start -->
      <div class="shopcar">
        <svg class="icon qicheqianlian-" aria-hidden="true">
          <use xlink:href="#icon-qicheqianlian-"></use>
        </svg>
        <a href="">我的购物车</a>
        <i class="shopcar-count">0</i>
      </div>
      <!-- shopcar end -->
      <!-- navitems start -->
      <div class="navitems">
        <ul class="fr">
          <li><a class="style-red" href="">秒杀</a></li>
          <li><a class="style-red" href="">优惠券</a></li>
          <li><a class="style-black" href="">狗东会员</a></li>
          <li><a class="style-black" href="">品牌闪购</a></li>
          <li><a class="style-black" href="">拍卖</a></li>
          <li><a class="style-black" href="">狗东家电</a></li>
          <li><a class="style-black" href="">狗东超市</a></li>
          <li><a class="style-black" href="">狗东生鲜</a></li>
          <li><a class="style-black" href="">狗东国际</a></li>
          <li><a class="style-black" href="">狗东金融</a></li>
        </ul>
      </div>
      <!-- navitems end -->
    </div>
  </div>
  <!-- 头部 end -->
  <!-- 导航 start -->
  <div class="main w">
    <!-- 左侧导航栏 start -->
    <div class="dropdown fl">
      <ul>
        <li><a href="#">家用电器</a></li>
        <li>
          <a href="#">手机</a>
          <span>/</span>
          <a href="#">运营商</a>
          <span>/</span>
          <a href="#">数码</a>
        </li>
        <li><a href="#">电脑</a></li>
        <li><a href="#">家居</a></li>
        <li><a href="#">男装</a></li>
        <li><a href="#">美妆</a></li>
        <li><a href="#">女鞋</a></li>
        <li><a href="#">男鞋</a></li>
        <li><a href="#">房产</a></li>
        <li><a href="#">母婴</a></li>
        <li><a href="#">食品</a></li>
        <li><a href="#">艺术</a></li>
        <li><a href="#">医药保健</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">工业品</a></li>
      </ul>
    </div>
    <!-- 左侧导航栏 end -->
    <!-- 轮播图 start  -->
    <div class="banner fl">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/1.jpg" alt="" width="750px" height="465px">
          </div>
          <div class="swiper-slide">
            <img src="./img/2.jpg" alt="" width="750px" height="465px">
          </div>
          <div class="swiper-slide">
            <img src="./img/3.jpg" alt="" width="750px" height="465px">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <!-- 轮播图 end  -->
    <!-- 个人中心 start -->
    <div class="newsflash">
      <div class="news"></div>
      <div class="lifeservice"></div>
      <div class="bargain"></div>
    </div>
    <!-- 个人中心 end -->
  </div>
  <!-- 导航 end -->

  <!-- 底部 start -->
  <div class="footer">
    <div class="w">
      <!-- icon 模块 start -->
      <div class="mod_service">
        <ul>
          <li>
            <div>
              <h5>
                <svg class="icon mod_service_size" aria-hidden="true">
                  <use xlink:href="#icon-tianmaozhengpinbaozhang
                  "></use>
                </svg>
              </h5>
              <p class="mod_service_text">品类齐全，轻松购物</p>
            </div>
          </li>
          <li>
            <div>
              <h5>
                <svg class="icon mod_service_size" aria-hidden="true">
                  <use xlink:href="#icon-wuyoushouhou
                  "></use>
                </svg>
              </h5>
              <p class="mod_service_text">多仓直发，极速配送</p>
            </div>
          </li>
          <li>
            <div>
              <h5><svg class="icon mod_service_size" aria-hidden="true">
                  <use xlink:href="#icon-tesefuwu
                "></use>
                </svg></h5>
              <p class="mod_service_text">正品行货，精致服务</p>
            </div>
          </li>
          <li>
            <div>
              <h5><svg class="icon mod_service_size" aria-hidden="true">
                  <use xlink:href="#icon-jisuwuliu
                "></use>
                </svg></h5>
              <p class="mod_service_text">天天低价，畅选无忧</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- icon 模块 end -->
      <!-- 帮助 模块 start -->
      <div class="mod_help">
        <div>
          <h5>购物指南</h5>
          <ul>
            <li><a href="">购物流程</a></li>
            <li><a href="">会员介绍</a></li>
            <li><a href="">生活旅行</a></li>
            <li><a href="">常见问题</a></li>
            <li><a href="">大家电</a></li>
            <li><a href="">联系客服</a></li>
          </ul>
        </div>
        <div>
          <h5>配送方式</h5>
          <ul>
            <li><a href="">上门自提</a></li>
            <li><a href="">211限时达</a></li>
            <li><a href="">配送服务查询</a></li>
            <li><a href="">配送费收取标准</a></li>
            <li><a href="">海外配送</a></li>
          </ul>
        </div>
        <div>
          <h5>支付方式</h5>
          <ul>
            <li><a href="">货到付款</a></li>
            <li><a href="">在线支付</a></li>
            <li><a href="">分期付款</a></li>
            <li><a href="">公司转账</a></li>
          </ul>
        </div>
        <div>
          <h5>售后服务</h5>
          <ul>
            <li><a href="">售后政策</a></li>
            <li><a href="">价格保护</a></li>
            <li><a href="">退款说明</a></li>
            <li><a href="">返修/退换货</a></li>
            <li><a href="">取消订单</a></li>
          </ul>
        </div>
        <div>
          <h5>特色服务</h5>
          <ul>
            <li><a href="">夺宝岛</a></li>
            <li><a href="">DIY装机</a></li>
            <li><a href="">延保服务</a></li>
            <li><a href="">京东E卡</a></li>
            <li><a href="">京东通信</a></li>
            <li><a href="">京鱼座智能</a></li>
          </ul>
        </div>
      </div>
      <!-- 帮助 模块 end -->
      <!-- 版权 模块 start -->
      <div class="mod_copyright">
        <p>
          <a href="">关于我们</a>
          <span>|</span>
          <a href="">联系我们</a>
          <span>|</span>
          <a href="">联系客服</a>
          <span>|</span>
          <a href="">合作招商</a>
          <span>|</span>
          <a href="">商家帮助</a>
          <span>|</span>
          <a href="">营销中心</a>
          <span>|</span>
          <a href="">手机京东</a>
          <span>|</span>
          <a href="">友情链接</a>
          <span>|</span>
          <a href="">销售联盟</a>
          <span>|</span>
          <a href="">京东社区</a>
          <span>|</span>
          <a href="">风险监测</a>
          <span>|</span>
          <a href="">隐私政策</a>
          <span>|</span>
          <a href="">京东公益</a>
          <span>|</span>
          <a href="">English Site</a>
          <span>|</span>
          <a href="">Media & IR</a>
        </p>
        <div class="copyright_info">
          <div class="cert">
            <p>
              <a href="">京公网安备 11000002000088号</a>
              <span>|</span>
              <a href="">京ICP证070359号</a>
              <span>|</span>
              <a href="">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
              <span>|</span>
              <a href="">新出发京零 字第大120007号</a>
            </p>
            <p>
              <a href="">互联网出版许可证编号新出网证(京)字150号</a>
              <span>|</span>
              <a href="">出版物经营许可证</a>
              <span>|</span>
              <a href="">网络文化经营许可证京网文[2014]2148-348号</a>
              <span>|</span>
              <a href="">违法和不良信息举报电话：4006561155</a>
            </p>
            <p>
              <a href="">Copyright © 2004 - 2020 京东JD.com 版权所有</a>
              <span>|</span>
              <a href="">消费者维权热线：4006067733经营证照</a>
              <span>|</span>
              <a href="">(京)网械平台备字(2018)第00003号</a>
              <span>|</span>
              <a href="">营业执照</a>
            </p>
          </div>
          <div class="inter">
            <p>
              <a href="">Global Site</a>
              <span>|</span>
              <a href="">Сайт России</a>
              <span>|</span>
              <a href="">Situs Indonesia</a>
              <span>|</span>
              <a href="">Sitio de España</a>
              <span>|</span>
              <a href="">เว็บไซต์ประเทศไทย</a>
            </p>
          </div>
          <div class="subsites">
            <p>
              <span>京东旗下网站：</span>
              <a href="">京东钱包</a>
              <span>|</span>
              <a href="">京东智联云</a>
            </p>
          </div>
        </div>
      </div>
      <!-- 版权 模块 end -->
    </div>
  </div>
  <!-- 底部 end -->


  <script>
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      direction: 'horizontal',
      speed: 1500,
      grabCursor: true,
      pagination: {
        el: '.swiper-pagination',
      },
      autoplay: true,
      autoplay: {
        delay: 2500, //3秒切换一次
        disableOnInteraction: true, //默认为true,用户操作swiper之后，禁止自动切换。如果设置为false，用户操作swiper之后自动切换不会停止
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  </script>
</body>

</html>